<template>
  <div class="h-full p-2">
    <Scrollbar>
      <div class="flex gap-20px">
        <div class="sortable_item">
          <draggable
            v-model="list"
            :component-data="{
              type: 'transition-group',
              class: 'draggable_item',
            }"
            :animation="180"
            handle=".draggable-item"
            group="field-table"
            item-key="value"
          >
            <template #item="{ element }">
              <div class="element_item draggable-item">
                {{ element.title }}
              </div>
            </template>
          </draggable>
        </div>
        <div class="felx-1 flex items-center">
          <SwapOutlined style="font-size: 30px" />
        </div>
        <div class="sortable_item">
          <draggable
            v-model="list2"
            :component-data="{
              type: 'transition-group',
              class: 'draggable_item',
            }"
            :animation="180"
            handle=".draggable-item"
            group="field-table"
            item-key="value"
          >
            <template #item="{ element }">
              <div class="element_item draggable-item">
                {{ element.label }}
              </div>
            </template>
          </draggable>
        </div>
      </div>
    </Scrollbar>
  </div>
</template>
<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { Scrollbar } from '/@/components/Scrollbar';
  import draggable from 'vuedraggable';
  import { SwapOutlined } from '@ant-design/icons-vue';
  const props = defineProps({
    formGetFieldsData: {
      type: Array,
      default: () => [],
    },
    modelValue: {
      type: String,
      default: '',
    },
  });
  const emit = defineEmits(['update:modelValue']);
  const list = ref<Recordable[]>([]);
  const list2 = ref<Recordable[]>([]);
  const fetch = () => {
    let fielsList: any[] = [];
    if (props.modelValue) {
      fielsList = props.modelValue.split(',');
    }
    const { formGetFieldsData } = props;
    formGetFieldsData.forEach((item) => {
      if (fielsList.includes(item.value)) {
        list2.value.push(item);
      } else {
        list.value.push(item);
      }
    });
  };
  watch(
    () => list2.value,
    () => {
      const fields = list2.value.map((item) => item.value).join(',');
      console.log('fields', fields);
      emit('update:modelValue', fields);
    },
  );
  watch(
    () => props.formGetFieldsData,
    (newVal) => {
      if (newVal) {
        console.log('formGetFieldsData', props.formGetFieldsData);
        fetch();
      }
    },
    {
      immediate: true,
    },
  );
</script>
<style lang="less" scoped>
  .sortable_item {
    background-color: #ecf5fc;
    width: 200px;
    padding: 10px;
    border: 1px dashed #88b4d9;
    .element_item {
      background-color: #eeeeee;
      padding: 10px;
      margin-bottom: 10px;
      cursor: move;
    }
  }
  .draggable_item {
    min-height: 42px;
    height: 100%;
  }
</style>
